<template>
    <div class="codeitembox">
        <ul class="codebox f-clear">
            <li>
                <p class="codename txtshadow">患者住院流水号</p>
                <!-- <img class="codeimg" :src="item.imgurl"> -->
                <div class="erweima" id="qrcode"></div>
            </li>
            <li>
              <p class="codename txtshadow">医院订阅号</p>
              <img class="codeimg" src="../../../static/images/indexone/code1.jpg">
            </li>
            <li>
              <p class="codename txtshadow">医院服务号</p>
              <img class="codeimg" src="../../../static/images/indexone/code2.jpg">
            </li>
        </ul>
    </div>
</template>

<script>
import QRCode from 'qrcodejs2' // 引入qrcode生产二维码的
import $ from 'jquery'
export default {
  name: 'codeitem',
  props: ['codedata'],
  data () {
    return {
      codelist: [
        {
          title: '患者住院ID',
          imgurl: '../../../static/images/indexone/code.png'
        },
        {
          title: '医院公众号',
          imgurl: '../../../static/images/indexone/code.png'
        },
        {
          title: '关注本科室',
          imgurl: '../../../static/images/indexone/code.png'
        }
      ]
    }
  },
  mounted () {
    // this.qrcode()
    // console.log(this.codedata)
  },
  created () {
    // this.qrcode()
    // console.log(this.codedata)
  },
  updated () {
    this.changecode()
  },
  methods: {
    qrcode () {
      // 生成二维码
      // var that = this
      // let qrcode = new QRCode('qrcode', {
      //   text: that.codedata, // 二维码内容
      //   background: '#f0f',
      //   foreground: '#ff0',
      //   width: 150,
      //   height: 150
      // })
      // console.log(that.codedata)
    },
    changecode (param) {
      console.log(param)
      $('#qrcode').empty()
      let qrcode = new QRCode('qrcode', {
        text: param, // 二维码内容
        background: '#f0f',
        foreground: '#ff0',
        width: 80,
        height: 80
      })
      console.log(qrcode)
    }
  },
  watch: {
    $route (to, from) {
      if (to.path === '/') {
        this.changecode()
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../assets/css/indexcommon.css';
    .codeitembox
        .codebox
            li
                width: 2.27rem;
                height: 2.3rem;
                background: #37c0b0;
                border-radius: 0.2rem;
                margin-right: 0.19rem;
                float: left;
                &:last-child
                    margin-right: 0;
                .codename
                    font-size: 0.3rem;
                    color: #fff;
                    padding: 0.38rem 0 0.2rem;
                .codeimg
                    width: 1.2rem;
                    height: 1.2rem;
                    display: block;
                    margin: 0 auto;
        #qrcode
          margin: 0 auto;
          width: 80px;
          height: 80px;
          position: relative;
          img
            position:absolute
</style>
